<template>
  <div class="login-container">
    <van-nav-bar
      class="page-nav-bar"
      title="注册"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="logo-txt">
      注册账号
    </div>
    <van-form ref="form" @submit="onSubmit" class="login-form">
      <van-field
        class="logininput"
        v-model="user.username"
        name="username"
        placeholder="请输入账户名"
        :rules="rules.username"
        left-icon="manager-o"
        label="账户名"
        clearable
      />
      <van-field
        class="logininput"
        v-model.number="user.telephone"
        name="telephone"
        placeholder="请输入手机号"
        :rules="rules.telephone"
        left-icon="manager-o"
        label="手机号"
        clearable
      />
      <van-field
        class="logininput"
        v-model.number="user.authCode"
        name="authCode"
        placeholder="请输入短信验证码"
        :rules="rules.authCode"
        left-icon="manager-o"
        label="验证码"
        clearable
      >
        <template #button>
          <van-button
            native-type="button"
            v-if="isCountDownShow"
            size="small"
            type="default"
          >
            <van-count-down
              format="ss 秒"
              @finish="isCountDownShow = false"
              :time="1000 * 10"
            />
          </van-button>
          <van-button
            native-type="button"
            v-else
            @click="sendSms"
            size="small"
            type="primary"
            >发送验证码</van-button>
        </template>
      </van-field>
      <van-field
        class="logininput"
        v-model="user.password"
        type="password"
        name="password"
         label="密码"
          left-icon="lock"
        placeholder="请输入密码"
        clearable
        :rules="rules.password"
      />
      
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" >立即注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { register,sendSms } from "@/api/user";
export default {
  data() {
    return {
      user: {
        username: '醉酒笑红尘',
        telephone: 17342065909,
        authCode: '',
        password: "admin888",
      },
      isCountDownShow:false,
      rules: {
        telephone: [
          {required: true, message: "手机号不能为空",},
          {pattern: /^1[3|5|7|8]\d{9}$/,message: "手机号格式错误"},
        ],
        password: [ { required: true,message: "密码不能为空" } ],
        username: [ { required: true,message: "账户名不能为空" } ],
        authCode: [ { required: true,message: "验证码不能为空" } ],
      },
    };
  },
  created() {
    if (this.$route.params.redirect) {
      this.$toast.fail("请先登录");
    }
  },
  methods: {
    // 发送验证码事件
    async sendSms(){
      // 1. 校验手机号是否正确
      try {
        await this.$refs.form.validate('telephone')
      } catch (error) {
        console.log(error);
        return this.$toast.fail('手机号格式不正确')
      }
      // 2. 发送请求
      let res = await sendSms({telephone:this.user.telephone})
      this.$toast.success('发送成功，请查收！')
      this.$notify({ type: 'success', message: '您的验证码是:'+ res});
      setTimeout(() => {
        this.user.authCode = res
      }, 3000);
      // 3. 展示倒计时
      this.isCountDownShow = true
    },
    // 注册事件
    async onSubmit() {
      const user = this.user;
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: "注册中...",
      });
      try {
        await register(user);
        this.$toast.success('注册成功')
        this.$router.replace('/login')
      } catch (error) {
        this.$toast.fail(error)
      }
    },
  },
};
</script>
<style lang="less" scoped>
.logo-txt {
  text-align: center;
  margin: 80px;
}
.help {
  color: #ff6e45;
  font-size: 30px;
  padding:  0 20px;
}
</style>